How to order list items using flexbox? - html

Question

I have a simple section which display list items and image, here is how it should look :
I know its simple using framework like bootstrap etc but I want to use only flex.
Here is html:
<section class="info-section">
<div class="main-info">
<div class="main-info_left">
<h2>Nature from air</h2>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
<ol class="info-list">
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ol>
</div>
<div class="main-info_right">
<span><img src="images/drone.png"></span>
</div>
</div>
</section>
Here is css I have tried:
.main-info{
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position: relative;
margin: 21px 0 57px 2em;
padding: 22px 41px;
list-style: none;
background: #fff;
}
ol > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width: 54px;
height: 54px;
border-radius: 50%;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding: 17px;
border: 1px solid rgb(63, 78, 118);;
background:#fff;
font-weight:bold;
font-family: proximaNova;
text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
here is Jsfiddle : http://jsfiddle.net/bmL7jogu/1/
Unfortunately I dont get the result I want , what do I need to change to get what I want? newbie to flex though

Answer 1

I suppose you want to achieve a vertically counting list items that wraps to rightside. You have already managed to customise incrementing numbers, which seems to be working great.
The actual element in which you want to apply display: flex; is <ol>, which is the parent of <li> creating the columns. Also, by default flexbox will pile up horizontally rather than vertically, and thus you need to apply flex-direction: column; to achieve vertical direction. Finally, adding flex-wrap: wrap; will let flexbox children to 'wrap' to next line, in our case to rightside of the first columns. By configuring e.g. max-width: 50%; to <li> you can adjust how many columns will be displayed when wrapped.
To summarise, below code will achieve desired list items:
ol {
display: flex;
flex-direction: column; /* Make flex children pile up 'vertically'. */
flex-wrap: wrap; /* Wrap children to next 'column'. */
max-width: 60%; /* To prevent covering the drone image. */
max-height: 600px; /* Set maximum height so columns will wrap. */
margin-left: 0; /* Remove the default left margin */
padding-left: 0; /* Remove the default left padding */
counter-reset: li; /* Initiate a counter */
}
ol > li {
position: relative;
margin: 21px 0 57px 2em;
padding: 22px 41px;
max-width: 50%;
list-style: none;
}
In addition, I would recommend you to set your drone image as background-image to .main-info as it seems to be behaving more as a background. By this way, you can avoid struggling with nested flexbox to achieve your design.
Final code:
https://jsfiddle.net/dorapen/7rdb096t/
I hope this answers your question.

Answer 2

You have to set display: flex to the parent and then add order:1 to the first item and then order the others.
.parent{
display: flex;
flex-wrap: wrap;
}
.parent .order1{
order: 1;
}
.parent .order2{
order: 2;
}
.parent .order3{
order: 3;
}
<div class="parent">
<p class="order3"></p>
<p class="order1"></p>
<p class="order2"></p>
</div>
You can also do it with property column-count: 2;
Hope it helps!