Ten columns in two rows (for LG) and normal column for other widths

user_13921442 0
Viewed 25

I would like to present 10 columns in 2 row (for XL/LG) and use normal col for other dimensions (MD: col-md-4 / SM: col-sm-6)

I am able to present what I want for LG using two <div class="row"> but for the MD/SM dimensions, this is problematic as I will have staggered displays and with spaces.

Example 1: OK for LG but not MD/SM

<div class="row">
    <div class="col-lg col-md-4 col-sm-6">1</div>
    <div class="col-lg col-md-4 col-sm-6">2</div>
    <div class="col-lg col-md-4 col-sm-6">3</div>
    <div class="col-lg col-md-4 col-sm-6">4</div>
    <div class="col-lg col-md-4 col-sm-6">5</div>
</div>
<div class="row">
    <div class="col-lg col-md-4 col-sm-6">6</div>
    <div class="col-lg col-md-4 col-sm-6">7</div>
    <div class="col-lg col-md-4 col-sm-6">8</div>
    <div class="col-lg col-md-4 col-sm-6">9</div>
    <div class="col-lg col-md-4 col-sm-6">10</div>
</div>

Example 2: OK for MD/SM but not LG

<div class="row">
    <div class="col-lg col-md-4 col-sm-6">1</div>
    <div class="col-lg col-md-4 col-sm-6">2</div>
    <div class="col-lg col-md-4 col-sm-6">3</div>
    <div class="col-lg col-md-4 col-sm-6">4</div>
    <div class="col-lg col-md-4 col-sm-6">5</div>
    <div class="col-lg col-md-4 col-sm-6">6</div>
    <div class="col-lg col-md-4 col-sm-6">7</div>
    <div class="col-lg col-md-4 col-sm-6">8</div>
    <div class="col-lg col-md-4 col-sm-6">9</div>
    <div class="col-lg col-md-4 col-sm-6">10</div>
</div>
bootstrap-4
1 Answers

Column breaks can be applied per breakpoint.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row">
  <div class="col-lg col-md-4 col-sm-6">1</div>
  <div class="col-lg col-md-4 col-sm-6">2</div>
  <div class="col-lg col-md-4 col-sm-6">3</div>
  <div class="col-lg col-md-4 col-sm-6">4</div>
  <div class="col-lg col-md-4 col-sm-6">5</div>

  <!-- Force next columns to break to new line at lg breakpoint and up -->
  <div class="w-100 d-none d-lg-block"></div>

  <div class="col-lg col-md-4 col-sm-6">6</div>
  <div class="col-lg col-md-4 col-sm-6">7</div>
  <div class="col-lg col-md-4 col-sm-6">8</div>
  <div class="col-lg col-md-4 col-sm-6">9</div>
  <div class="col-lg col-md-4 col-sm-6">10</div>
</div>

user_12648040
Related