How to change Columns display order?

Asked

Viewed 496 times

0

I got the following:

.container{columns:3;}
span{width:100%;display:inline-block;width:100px;background-color:red;margin-bottom:10px}
<div class='container'>
  <span style='height:20px'>1</span>
  <span style='height:50px'>2</span>
  <span style='height:30px'>3</span>
  <span style='height:50px'>4</span>
  <span style='height:50px'>5</span>
  <span style='height:20px'>6</span>
  <span style='height:30px'>7</span>
  <span style='height:25px'>8</span>
  <span style='height:35px'>9</span>
</div>

When executing the above code, note that the display order of the numbers is vertical. Is there any way to change the order with CSS?

css css3

3 answers

2

You can do it using display:flex, with it you can control the direction that the columns will be displayed through the property flex-Direction:(Row | Row-Reverse | column | column-Reverse), and if you want to control the items you can add the property order (which receives an integer number), and set a fixed order.

Follow an example using your code:

<!doctype html>
<html>
<head>
    <meta charset="iso-8859-1">
    <title>Teste</title>
    <style>
	.container{
		display:flex;
		flex-direction: row;
	}
		
	span {
		width:100px;
		background-color:red;
		margin-bottom:10px
	}
    </style>
</head>
<body>
<div class='container'>
  <span style='height:20px'>1</span>
  <span style='height:50px'>2</span>
  <span style='height:30px'>3</span>
  <span style='height:50px'>4</span>
  <span style='height:50px'>5</span>
  <span style='height:20px'>6</span>
  <span style='height:30px'>7</span>
  <span style='height:25px'>8</span>
  <span style='height:35px'>9</span>
</div>
</body>
</html>

2

In Bootstrap 4

https://getbootstrap.com.br/docs/4.1/utilities/flex/#order

Change the visual order of flex items using the order utility. Responsive variations are also possible (ex: . order-0, . order-1, . order-Sm-0, . order-Sm-1).

<div class="d-flex">
  <div class="order-3">Primeiro flex item</div>
  <div class="order-2">Segundo flex item</div>
  <div class="order-1">Terceiro flex item</div>
</div>

0

can do this using Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class='row'>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:20px'>1</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:50px'>2</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:30px'>3</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:50px'>4</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:50px'>5</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:20px'>6</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:30px'>7</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:25px'>8</span>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-12">
              <span style='height:35px'>9</span>
            </div>
        </div>

for more information read the Boostrap documentation

https://getbootstrap.com/docs/4.0/layout/grid/

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.