0

how to rearrange bootstrap columns? i have a 2 column layout on desktop view

this is what i have in desktop view

enter image description here

im trying to achieve this layout on mobile view, is this possible?

enter image description here

nhoyti
  • 1,615
  • 2
  • 26
  • 42

2 Answers2

0

To enable this you will want to have each div include the following classes:

<div class="col-lg-6 col-xs-12"></div>

Look into the bootstrap grid system for more info.

web1connoisseur
  • 86
  • 11
  • Here is a similar question that explains the grid system well. Please select my answer as correct if it answered your question. [https://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap] – web1connoisseur Feb 08 '22 at 14:24
0

i have found the answer

Template

<div class="col-lg-4 col-xs-12">1</div>
<div class="col-lg-8 col-xs-12 top-features">2</div>
<div class="col-lg-4 col-xs-12 item-brand">3</div>
<div class="col-lg-8 col-xs-12"><4/div>
<div class="col-lg-4 col-xs-12">5</div>
<div class="col-lg-8 col-xs-12">6</div>

Styles

@media screen and (min-width: 769px) {

  .top-features {
    order: 2;
  }

  .item-brand {
    order: 1;
  }
}
nhoyti
  • 1,615
  • 2
  • 26
  • 42