CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike
Mike

Reputation: 107

Bootstrap: Get Row-span like behavior?

I have a grid layout where I want a menu on the right in desktop mode, but on the top in mobile. This works fine like this:

    <div class="row">
        <div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div>
        <div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div>
    </div>

But, I'd like to add other content directly below the menu on the right in desktop mode and have it move below the main content on mobile.

In other words, I'd like it to end up looking like what this would do on mobile:

    <div class="row">
        <div class="col-xs-12"><div id="menu"></div></div>
        <div class="col-xs-12"><div id="main-content"></div></div>
        <div class="col-xs-12"><div id="side-content"></div></div>
    </div>

Is there any way to make it so I could have two cells on the right in desktop mode, but have one flow above the main content while the other flows below the main content on mobile?

Edit: Here's a picture of what I mean enter image description here

Upvotes: 0

Views: 73

Answers (2)

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Go with the link or below code also may be it can help you -

JSFiddle

HTML Code - 

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-4 menuDiv">
      <div id="menu">
        <h1>menu</h1></div>
    </div>
    <div class="col-xs-12 col-sm-8">
      <div id="main-content">
        <h1>main</h1></div>
    </div>
    <div class="col-xs-12 col-sm-4 sideDiv">
      <div id="side-content">
        <h1>side</h1></div>
    </div>
  </div>
</div>

CSS Code - 

#menu{
  background-color:#60E877;
}

#main-content{
  background-color:#E86060;
}

#side-content{
  background-color:#685818;
}

@media(min-width:768px){
  .menuDiv, .sideDiv{
    float:right;
  }
}

Upvotes: 1

neophyte
neophyte

Reputation: 6626

Try this it will work--

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
  </head>

    <body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div>
        <div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;">
      <div id="side-content"><h1>side</h1></div></div>
      
        
        
        </div>
    </div>

</body>
  </html>

Upvotes: 0

Related Questions