Adjust the order of list items based on the resolution change

Question

Adjust the order of list items based on the resolution change

Is there a way to rearrange the order of the list items in an ul when the screen resolution changes, specifically having the last li appear in the first place?

Edit: I am attempting to achieve this by using flexbox.

 .postpreview ul {
list-style: none;
display: inline-flex;

}

.postpreview ul li {
flex: 0 100px 30px;
}

@media(max-width: 1000px) {
.postpreview ul {
flex-direction: row-reverse;
justify-content: flex-end;
 }
}

Currently, on smaller screens, the layout is not as desired. How can I make the last item appear at the top instead of staying on the right? Check it out live here:

jquery html css

Answer 1

Answer №1

Effective CSS-only technique utilizing flexible boxes:

ul {
  display: flex;
}
li {
  flex: 0 0 30px;
}
@media(max-width: 1000px) {
  ul {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

Check out the Live example, with a screen width threshold set at 1000px.

Update: To switch from horizontal to vertical layout, simply use flex-direction: column in your media query. Providing specific examples and intentions would greatly assist in offering tailored solutions. The question could benefit from further clarification.

Answer 2

Effective CSS-only technique utilizing flexible boxes:

ul {
  display: flex;
}
li {
  flex: 0 0 30px;
}
@media(max-width: 1000px) {
  ul {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

Check out the Live example, with a screen width threshold set at 1000px.

Update: To switch from horizontal to vertical layout, simply use flex-direction: column in your media query. Providing specific examples and intentions would greatly assist in offering tailored solutions. The question could benefit from further clarification.

Answer 3

Answer №2

Here is some code for styling a navigation bar using CSS:

nav ul li { display: inline; margin: 0 100px; }

And here is the corresponding HTML code:

<nav>
<ul>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
</ul>
</nav>

There is also some JavaScript code included to adjust the margins dynamically:

function Func(){
var list = $('nav ul li'),
    firstLi = list.first().offset().top,
    lastLi = list.last().offset().top,
    mLeft = parseInt(list.css('marginLeft')),
    mRight = parseInt(list.css('marginRight'))
if(firstLi != lastLi){
    --mLeft
    --mRight
    list.css({
        'marginLeft': mLeft,
        'marginRight': mRight
     })  
     Func();
  }
}

 Func();

Another solution:

You can also consider using media queries to make your navigation bar responsive for different screen resolutions.

Answer 4

Here is some code for styling a navigation bar using CSS:

nav ul li { display: inline; margin: 0 100px; }

And here is the corresponding HTML code:

<nav>
<ul>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
</ul>
</nav>

There is also some JavaScript code included to adjust the margins dynamically:

function Func(){
var list = $('nav ul li'),
    firstLi = list.first().offset().top,
    lastLi = list.last().offset().top,
    mLeft = parseInt(list.css('marginLeft')),
    mRight = parseInt(list.css('marginRight'))
if(firstLi != lastLi){
    --mLeft
    --mRight
    list.css({
        'marginLeft': mLeft,
        'marginRight': mRight
     })  
     Func();
  }
}

 Func();

Another solution:

You can also consider using media queries to make your navigation bar responsive for different screen resolutions.

Answer 5

Answer №3

const myTag = $('ul');
const childTags = myTag.children('li');
myTag.append(childTags.get().reverse());

Answer 6

const myTag = $('ul');
const childTags = myTag.children('li');
myTag.append(childTags.get().reverse());

Adjust the order of list items based on the resolution change

Answer №1

Answer №2

Answer №3

Similar questions

Reduce the combined character value of the title and excerpt by trimming the excess characters

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

Verify if the date string includes the day

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

What are the various methods for incorporating icons and logos into website design?

Is there a way to make the footer adapt to the varying heights of the grid sections as they grow in size?

Is there a way to eliminate unknown white gaps in the content?

The radio button is displaying the text 'on' instead of its designated value

The art of aligning text in CKEditor5

At what point do browsers decide to round pixel fractions to whole pixels, and when do they choose not to do

Tips for loading a webpage with optimal speed and efficiency

Implementation of cascading selects using JQuery

Is it possible to monitor a section of a webpage's source code for any updates and notify about them?

Utilize BotDetect in Angular js for advanced functionality

Save JSON data from Javascript to a file on the server without using a server-side application

Unable to showcase Mysql search outcomes in a distinct div section

I'm looking to create a chart similar to this using Bootstrap 4 - any advice on how to

The Chrome browser is not displaying the Ajax loader

Incorporating Angular module into the mean.io bundle

At a specific media query breakpoint, links are disabled while the rest continue to function without any