Results 1 to 1 of 1

Thread: Bootstrap grid system. How to mix .sm(tablets) class and .md(medium desktops) class?

  1. #1
    Junior Member
    Join Date
    May 2017
    Posts
    1

    Bootstrap grid system. How to mix .sm(tablets) class and .md(medium desktops) class?

    Live site : http://portfoliozervas.heliohost.org...n/reviews.html

    In page reviews.html , I'd like to have 3 reviews per row for .col-sm(tablets) and 4 reviews per row for .col-md(medium desktops) .

    In my mind , I have the following example . I'd like to tell me if my example is wrong or right .

    Code:
    <div class="row">
      <div class="col-sm-4 col-md-3">review 1</div>
      <div class="col-sm-4 col-md-3">review 2</div>
      <div class="col-sm-4 col-md-3">review 3</div>
      <div class="col-sm-4 col-md-3">review 4</div>
      <div class="col-sm-4 col-md-3">review 5</div>
      <div class="col-sm-4 col-md-3">review 6</div>
      <div class="col-sm-4 col-md-3">review 7</div>
      <div class="col-sm-4 col-md-3">review 8</div>
      <div class="col-sm-4 col-md-3">review 9</div>
      <div class="col-sm-4 col-md-3">review 10</div>
      <div class="col-sm-4 col-md-3">review 11</div>
      <div class="col-sm-4 col-md-3">review 12</div>
    </div>
    For medium(.md class) desktops my reviews will be displayed : (Am I right ? if not please correct me. I mean, is the correct output for the code I wrote above?)

    Review 1| Review 2 | Review 3 | Review 4
    Review 5| Review 6| Review 7 | Review 8
    Review 9| Review 10 | Review 11 | Review 12

    And For tablets(.sm class) my reviews will be displayed: ( Am I right ? If not please correct me )

    Review 1| Review 2| Review 3
    Review 4| Review 5| Review 6
    Review 7| Review 8| Review 9
    Review 10| Review 11| Review 12

    please tell me what is the best practice to the example above ?
    Last edited by zervas; 05-20-2017 at 08:34 AM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •