0

I have an html page with a 3 column layout done with bootstrap basically like this:

<div name="column1" class="col-md-3"> 
   //column content here
</div>

<div name="column1" class="col-md-6"> 
   //column content here
</div>

<div name="column1" class="col-md-3"> 
   //column content here
</div>

This is just an example, the content inside i don't believe to be relevant to the question. The thins is that when I re-size the page, i want the middle column to remain on top of the page, while the 2 side columns stack beneath it.

IneptusMechanicus
  • 468
  • 4
  • 23
  • You could utilize the helper classes: hide-for-small, show-for-small, etc. That would mean you'd need to duplicate the first column and put the duplicated version under the main (middle) column. This isn't a particularly good solution, but its at least an easy one. – spasticninja Apr 18 '16 at 18:21
  • You can do it easily with flexbox, it has order property. But using only bootstraps columns may be impossible. – Przemysław Melnarowicz Apr 18 '16 at 18:33
  • Quick note for your personal knowledge: there's no "name" property on divs. It doesn't exist! – Annie Caron Apr 18 '16 at 18:56
  • Okay, so you should have seen this: [**Reorder CSS Columns Using Bootstrap**](https://scotch.io/tutorials/reorder-css-columns-using-bootstrap), which exactly has the answer you are looking for. – Praveen Kumar Purushothaman Apr 18 '16 at 19:21

1 Answers1

3

You can do it using Bootstrap's classes: 

<div class="row">
  <div class="col-md-push-3 col-md-6 col-xs-12">
    //column Center here
  </div>

  <div class="col-md-pull-6 col-md-3 col-xs-6">
    //column left here
  </div>

  <div class="col-md-3 col-xs-6">
    //column right here
  </div>
</div>

JSFiddle

class col in example only to show how it works, remove it in your markup

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
  • May I ask if the inspiration was from [**Reorder CSS Columns Using Bootstrap**](https://scotch.io/tutorials/reorder-css-columns-using-bootstrap)? – Praveen Kumar Purushothaman Apr 18 '16 at 19:21
  • 1
    @Praveen Kumar, great topic, thanks for sharing! but when I was looking for solution for my markup, I found it on SO! Few minutes, I try to find it now) – Igor Ivancha Apr 19 '16 at 06:35
  • 1
    @Praveen Kumar, http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap – Igor Ivancha Apr 19 '16 at 06:44