Reorder Flexbox items in Bootstrap 4 to display from top to bottom and left to right

Question

Reorder Flexbox items in Bootstrap 4 to display from top to bottom and left to right

Currently, I am utilizing Bootstrap 4 in conjunction with flexbox. Within a container-fluid, I have an alphabetically ordered list of items with the classes

col-xs-12 col-sm-6 col-md-4 col-xl-3

. These columns are responsive and as the number of items is variable, the height of the container cannot be predetermined.

The layout can consist of either 1, 2, 3, or 4 columns, and all rows have been designed to be consistently equal in width.

If you would like to see a demonstration of this setup, please visit: https://codepen.io/troutr/pen/XKQYjV

I have also provided an image showcasing the desired order: https://i.sstatic.net/aUmj6.jpg

Considering user experience, it would be beneficial if the items were organized top-to-bottom, left-to-right. Is there a way to achieve this using CSS? My initial thoughts revolve around utilizing media queries and the order property within flexbox.

html css bootstrap-4

Answer 1

Answer №1

Give the CSS property column-count a try. Be sure to check for browser compatibility here.

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Answer 2

Give the CSS property column-count a try. Be sure to check for browser compatibility here.

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Reorder Flexbox items in Bootstrap 4 to display from top to bottom and left to right

Answer №1

Similar questions

What is the best way to eliminate redundant template inheritance in Jinja2 for both Mobile and Desktop platforms?

What is the most efficient way to retrieve the two smallest numbers using jQuery?

Arranging text within a button in perfect alignment

Ways to conceal text as a div moves over it during hover effects?

Adding the <br> tag in a Bootstrap modal: a simple guide

Content missing after centered banner

Extracting table data using regular expressions in Import.io is a powerful method to retrieve specific values

What is the best way to center a parent container vertically?

The mobile CSS fails to adjust properly when I rotate the screen to landscape mode

Struggling with getting the Encore Webpack Bootstrap4.5 navbar to function properly

What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

What guidelines should I establish for arranging 2 rows of .col?

Error parsing XML: Missing opening tag

Electron framework experiencing compatibility issues with JQuery

The span's presence causes the neighboring span to shift downwards

What is the best way to stop a jQuery event listener on a button within a form from triggering upon the user hitting the Enter key?

Having trouble selecting elements that have been dynamically generated through an Ajax callback function

The functionality of Bootstrap 4's Responsiveness seems to be malfunctioning

Display picture next to content with the help of CSS/Bootstrap and Django's Jinja 2

Integrating a fictitious style using jQuery