CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
wadge
wadge

Reputation: 428

Bootstrap div respnsive table with multiple alignments at breakpoints

I'm having a bit of a hickup with bootstrap. Here's the deal: I have a table made with divs with 4 fields, but I want them to have different alignments when they are being viewed on a mobile phone. Let me put the code of my table here to help explain:

<div class="table-responsive container text-center">
   <div class="visible-md-block visible-lg-block row">
      <div class="col-xs-4 col-md-3"><strong>From</strong></div>
      <div class="col-xs-4 col-md-3"><strong>Points</strong></div>
      <div class="col-xs-4 col-md-3"><strong>To</strong></div>
      <div class="col-xs-12 col-md-3"><strong>Description</strong></div>    
   </div>

   <div class="row">
       <div class="col-xs-4 col-md-3">John doe</div>
       <div class="col-xs-4 col-md-3">+20</div>
       <div class="col-xs-4 col-md-3">Jane doe</div>
       <div class="col-xs-12 col-md-3">Test Description</div>
   </div>
</div>

There. If you are aware of bootstrap, you'll by now have realized the type of layout it will adopt. but I'll explain anyways:

When the viewport goes to a phone screen size I want the description column to go below the other ones. Thing is, on that phone screen size I want to put the alignment diffrently from the centered one (that I defined on the table).

I want the "From" column aligned to the left, the "Points" column center aligned and the "To" column right aligned and the "Description" column to be center aligned while on larger viewports I want them to have a diffrent alignment. How would I pull such an effect off?

Also tips on weather I should use a table or keep using divs for this type of responsive coding are welcome :p

Upvotes: 2

Views: 202

Answers (1)

Scott Hillson
Scott Hillson

Reputation: 853

To accomplish the behavior you're after, you're likely going to need to come up with your own class, give it the majority of behaviors that col-xs-4 and col-md-3 have, and add your own home brewed styling to make the Description column fall below the other three for certain @media queries, etc.

media all and (max-width: 1000px) {
  .custom-col-xs-4 {
    float: left;
  }
  .costom-col-xs-4-lower {
    clear: both;
  }
}

Consider step 9 of this 10 step positioning tutorial when doing so: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Upvotes: 1

Related Questions