Setting order to Image and Text on the same line with different breakpoints using bootstrap classes

user_14603068 0
Viewed 71

I have an image and text in the same row with the image coming first and the text to the left of it. What I am trying to do is make the text show above the image when screen is shrunk to the small breakpoint and when resized the image goes back to the left. I have the Image tag below the Text tag. Here is my code.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 order-2 col-sm-10 order-1 flex-column">
      <h2>Alignment</h2>
      <p> Alignment helps organize and order the content, controlling how the eye flows from one 
          component to the next. It is the organization and creation of invisible lines. Without 
          alignment, users will have a hard time recognizing how elements relate to eachother, and 
          your page will look messy and disorganized.</p>
            </div>
        <div class="col-md-2 order-1 col-sm-2 order-2 flex-column">
            <img src="carp4.jpg" class="">
        </div>
    </div>
</div>
bootstrap-4 html
1 Answers

You don't need to reverse the order from 1 to 2, since both breakpoints are reversed in the same order. If needed tho, switch it on a breakpoint like order-1 order-sm-2.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10 order-2">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
        <div class="col-sm-2 order-1">
            <img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
        </div>
    </div>
</div>

You could also use flex-column-reverse for extra small screens and flex-sm-row-reverse for small screens and up. This way you can avoid using order-*. The order-* is handy in case of more than 2 columns.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row flex-column-reverse flex-sm-row-reverse">
        <div class="col-sm-10">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
        <div class="col-sm-2">
            <img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
        </div>
    </div>
</div>

BUT, this seems overcomplicating things if you can switch the image and text columns around.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
        </div>
        <div class="col-sm-10">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
    </div>
</div>

Here's a jsfiddle to resize the result and play around.

user_11145300
Related