0

I've read that I can order my grid columns using https://getbootstrap.com/css/#grid-column-ordering, however, unfortunately, I cannot find a way to have "right column first" only in collapsed state.

Currently I have two columns "LEFT" (col-lg-4) and "RIGHT" (col-lg-8). I want the RIGHT column to collapse on top of the LEFT column, but stay on the right side if not collapsed.

How to?

Johannes
  • 64,305
  • 18
  • 73
  • 130
D.R.
  • 20,268
  • 21
  • 102
  • 205

3 Answers3

3

For more recent Bootsrap versions you can use flex-column reverse and set the size at which reverse property happens (i.e. below flex-lg-row):

<div class="row flex-column-reverse flex-lg-row">
    <div class="col-lg-4">
        sidebar
    </div>
    <div class="col-lg-8">
        main
    </div>
</div>

There is a duplicate thread at: How do I change Bootstrap 3 column order on mobile layout?

thunt
  • 89
  • 1
  • 11
1

u can use order, set the first col with higher order (like 'order-md-3'), form md to high size window it will on right side because higher order, and the second col will on left because its not have order its same 0 order (the lower order will on left).

<div class="row">

      <div class="col-md-5 order-md-3">
        <img src="../img/profile/fotocv.png" alt="foto profile" width="100%">
      </div>

      <div class="col-md-7">
        <div class="plang">
          <h1>Hi!</h1>
          <h1>I'M AMMARIDHO SIREGAR</h1>
          <h3>Web Developer</h3>
        </div>
      </div>

 </div>
FY R
  • 9
  • 2
0

add float: right to both and place the right one before the left one in the HTML code.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • This sounds like a hackaround, is this really "the way to go"? – D.R. Oct 08 '16 at 16:16
  • 1
    You can also add the class `.pull-right` instead - that contains the `float: right` property and brings the same result. Still you'll have to reverse the elements in the HTML, as i wrote. – Johannes Oct 08 '16 at 16:38