Display 1st child at last using CSS

HTML & CSS
1

Hello,

I have the following HTML:

<div id="1234">
<ul>
<li class="col-md-4">
<img src="/image/1.jpg">
<h3 class="h3text">
Name 1 </h3>
<div class="clr"></div>
</li>
<li class="col-md-4">
<img src="/image/2.jpg">
<h3 class="h3text">
Name 2 </h3>
<div class="clr"></div>
</li>
....and many more.......
</ul>
</div>

I would like to display the 1st child at last. I have tried the css below but not working:

#1234 {
display: flex; }

.col-md-4:nth-child(1) {
order: 100; }

I need the items to display in 3 columns, any idea ?

2

The col is not a flex item in that construct so the order property will have no effect.

You need the ul to be display:flex in order to re-order the list items.

Also avoid starting ids with numbers as that can cause problems although it is now allowed for html.

3

Hello and thanks,

the ids names and classes are just there because I replaced them (just there as example). I also tried :

ul {
display:flex }

but it will break my 3 columns layout. Any chance I can get “order” to work together with my 3 column layout ?

4

The ul becomes a flex box but it is also a flex item if you don’t remove the rule from the parent.

If you can’t remove the rule from the parent then make sure the ul is a full width item and then the columns will display as before.

I’m typing this on a mobile at the moment so can’t write the code out properly for you :slight_smile:

If you still can’t get it to work I’ll take a look n a couple of hours when I get home.

I assume this is part of a bootstrap page so I’d need to know which version you are using.

5

I have remove the rule from parent and apply to ul only. The 1st 3 li items will be in columns and the others seems to display on the right of the screen. Compatible with Bootstrap 4

6

In bootstrap 4 col-md-4 will mean three columns across the screen so if you have more than 3 list items then they will wrap around to the next line and so on. That’s not a problem if thats what you want.

In the code you supplied you have missed out the row class on the ul which is vital in bootstrap. You cannot nest columns unless they are direct children of a row class which in turn is a direct child of the container class. This is a requirement of bootstrap.

If you use the correct structure then indeed your original code works out of the box.

2 Likes
7

Working perfectly, thank you so much !

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.