Question 160989 in Html Question posted in
Some basic documentation can be found here.

Can HTML & Bootstrap 5 create responsive ordering with columns inside columns?

Is it possible to rearrange this layout (md+ devices)…

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-flex">
    <div class="col-8 bg-warning">
      <div>first div</div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <div class="col-3 bg-info">
      other content
    </div>
  </div>
</body>

…to this on xs, sm devices?

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-flex">
    <div class="col-12 bg-warning">
      <div>first div</div>
      <div class="bg-info">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
  </div>
</body>

Here, the blue column is moved INSIDE the yellow column.

I understand there are .order classes, but I’ve only seen them used for moving one column before another.

Thanks in advance!

Tags:

2

Answers


  1. 0

    Not directly via CSS, but you can use a trick with display properties.

    Anyways, remember that bootstrap is a mobile first framework, so you must think in "how can I rearrange this mobile layout, into md screens", the principal layout is mobile, then try to transform the layout to larger screens. Today more than 70% of internet browsing is via smartphones.

    Here is the code with Bootstrap 5! 😀

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex">
    <div class="col-12 col-md-8 bg-warning">
      <div>first div</div>
      <div class="bg-info d-md-none">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <div class="d-none d-md-flex col-md-3 bg-info">
      other content
    </div>
</div>

    enter image description here

    enter image description here

    Login or Signup to reply.
  2. 0

    You can use the code below:

    <head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-lg-flex d-none">
    <div class="col-8 bg-warning">
      <div>first div</div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <div class="col-3 bg-info">
      other content
    </div>
  </div>
   
  <div class="d-lg-none d-flex">
    <div class="col-12 bg-warning">
      <div>first div</div>
      <div class="bg-info">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
  </div>
</body>

    Explanation: the top code only shows on large screens and hides in small screens, and the bottom code only shows on small screens and hides in large screens.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search