CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Blease
Blease

Reputation: 1420

Bootstrap - Rows span columns but stay responsive

I'm trying to create a bootstrap based timetable, and I want it to be responsive across devices but it's a little harder than I though.

On larger devices, the layout should be the following with 3 parallel sessions, but the hour slots align with each other across columns:

Larger view

This will differ from the mobile view where the columns sit below each other and the horizontal alignment is ignored:

Mobile View

I did try to use a table in each column but quickly realise that idea was flawed. Various other attempts to make the columns the same height have also failed.

The bigger problem is that the content for each cell can vary, massively.

Upvotes: 3

Views: 757

Answers (1)

hcgriggs
hcgriggs

Reputation: 190

Have you tried nesting columns? You could put a single row of three columns, and then nest other divs inside of those columns. Here's a Bootply. You can see that the columns stack in mobile. Here's the code, it's relatively straightforward: 

<div class="container">

    <div class="row">
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-left"></div>

      </div>
      <div class="col-xs-12 col-md-4">

        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid"></div>

      </div>
      <div class="col-xs-12 col-md-4">

          <div class="col-xs-12 col-top"></div>
          <div class="col-xs-12 col-right"></div>
          <div class="col-xs-12 col-right"></div>
          <div class="col-xs-12 col-right"></div>

      </div> 
    </div>


</div>

UPDATED to accommodate the white blocks. In a large display you can see that I've just used CSS to make the empty blocks white, and when you view it in mobile, those blocks are hidden. Here's the updated Bootply, and here's the code.

<div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
        <div class="col-xs-12 col-left"></div>    
      </div>
      <div class="col-xs-12 col-md-4">   
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
      </div>
      <div class="col-xs-12 col-md-4">
          <div class="col-xs-12 col-top"></div>
          <div class="col-xs-12 col-topright"></div>
          <div class="col-xs-12 col-bottomright"></div>
      </div> 
    </div>
</div>

Upvotes: 2

Related Questions