CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Zobo
Zobo

Reputation: 293

Change bootstrap cols on mobile

Hello everyone I have page with 2 cols and in each col i have boxes. 

[6][6]
 a  b
 a  b
 a  b

How can I change order to have:

a
b
a
b
a
b

Is it possible? I want it only on mobile.Here is my page structure:

<div class="row">
  <div class="col-md-6">
    <div>a</div>
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
    <div>b</div>
  </div>
</div>

Upvotes: 1

Views: 66

Answers (2)

godblessstrawberry
godblessstrawberry

Reputation: 5088

I think you should just split your content to separate col-md-6 each like

<div class="row">
  <div class="col-md-6">
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
  </div>
  <div class="col-md-6">
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
  </div>
  <div class="col-md-6">
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
  </div>
</div>

does your layout allow this? e.g. http://codepen.io/anon/pen/doPogJ

Upvotes: 0

dfsq
dfsq

Reputation: 193301

I don't think it's possible with your current HTML structure. However if you can change a structure then you would be able to use grid classes to target xs devices:

<div class="row">
    <div class="col-sm-6">
        <div>a</div>
    </div>
    <div class="col-sm-6">
        <div>b</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div>a</div>
    </div>
    <div class="col-sm-6">
        <div>b</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div>a</div>
    </div>
    <div class="col-sm-6">
        <div>b</div>
    </div>
</div>

Demo: http://plnkr.co/edit/j2oHBuJUi1FWmiugy0nr?p=info

Upvotes: 2

Related Questions