CODEWITHSUNDEEP
csstwitter-bootstrap
Test
Test

Reputation: 315

css bootstrap - How to have a column split into rows only for small screen?

This is the starting point: http://www.bootply.com/r88hL82f3m

<div class="container">
  <div class="row">
    <div class="col-xs-0 col-md-3">
    </div>
     <div class="col-xs-12 col-md-9 text-right">
       <div id="id1">Div1 Div2</div>
    </div>
  </div>

</div>

I need Div1 and Div2 to split into two rows only for small screen and extra-small screen, meaning Div1 occupies first row and Div2 occupies second row.

While below bootply may look like a solution, it does not work because I don't want Div1 and Div2 to split up into columns on medium screen upwards - I want them to stay in one column on medium, large and extra-large screen. http://www.bootply.com/RkxKSdYZ2F

Upvotes: 4

Views: 4731

Answers (2)

JiFus
JiFus

Reputation: 968

This isn't very need, but it does the trick

<div class="container">
  <div class="row">
    <div class="col-xs-0 col-md-3">
    </div>
    <div class="col-xs-12 col-md-9 text-right">
      <div id="id1" class="visible-md visible-lg col-md-12">Div1 Div2</div>
      <div id="id1" class="visible-xs visible-sm col-xs-12">Div1</div>
      <div id="id1" class="visible-xs visible-sm col-xs-12">Div2</div>
    </div>
  </div>
</div>

bootply

Upvotes: 1

m4n0
m4n0

Reputation: 32315

Use visible-* and hidden-* classes to use two different containers.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 visible-xs visible-sm">
      <div class="id1">Div1</div>
      <div class="id2">Div2</div>
    </div>
    <div class="col-xs-12 hidden-xs hidden-sm">
      <div class="id1">Div1 Div2</div>
    </div>
  </div>

</div>

Upvotes: 2

Related Questions