Here is the structure:

<container> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6">1</div> <div class="col-lg-6 col-md-6 col-sm-6">2</div> </div> </container>

When the screen is narrowed, the first column remains at the top and the second moves to the bottom. How to make the second unit was at the top and the first at the bottom during the narrowing?

  • one
    And what kind of tag is <container> ? And if col-sm-6 indicated then col-lg-6 col-md-6 is superfluous. And to rearrange the columns in the bootstrap, there are push and pull classes - Russian Bear
  • Thank you. Could write in response - Artem PeGaS

2 answers 2

  1. Change the blocks in the layout in order to block 2 first, then 1.
  2. For sm-screens - apply the classes as in the example below.
  3. For md and lg-screens - classes can not specify. because the arrangement of the blocks you have on them is the same as on sm.

It will turn out like this:

 <container> <div class="row"> <div class="col-sm-6 col-sm-push-6">2</div> <div class="col-sm-6 col-sm-pull-6">1</div> </div> </container>

    The order of output of two blocks can be changed for different resolutions. In this code, when resizing to "telephone", the 2nd block will be displayed first:

     <container> <div class="row"> <div class="col-sm-6 order-sm-first order-last>1</div> <div class="col-sm-6 order-sm-last order-first>2</div> </div> </container>