I am using a <div> with CSS flex to maintain responsiveness.
I want to control the order in which elements are wrapped.
For instance, I need
1 - 2 - 3
To be rearranged as
1
3
2
Once fully wrapped.
Here is my current code: https://jsfiddle.net/g0L44e5b/
Is there a way to achieve this?
Of course, you have the ability to do so by utilizing the order property:
body {
display:flex;
flex-flow:column;
}
p:last-child{
order:1;
}
p:nth-child(2) {
order:2;
}<p>1</p>
<p>2</p>
<p>3</p>For a helpful resource, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/
edit after your edit
You can also apply wrapping and media queries in this manner:
body {
display:flex;
flex-wrap:wrap;
}
p {
flex:1;
min-width:380px;
margin:10px;
border:solid;
}
@media screen and (max-width : 800px) {
p:last-child{
order:1;
}
p:nth-child(2) {
order:2;
}
}<p>1</p>
<p>2</p>
<p>3</p>Take a look at this awesome pen:
http://codepen.io/chriscoyier/pen/YPzyYa
This particular pen does the following -- It initially assigns a default class to each element with an order attribute:
.icon {
order: 0 !important;
}
.username {
order: 1 !important;
width: 100%;
margin: 15px;
}
.search {
order: 2 !important;
width: 100%;
}
Then, it gives a specific ordering attribute to each flexbox by assigning a class to them:
.bar-2 {
.username {
order: 2;
}
}
.icon-3 {
order: 3;
}
Simply apply these sorting classes to your scenario and you'll be all set.
When employing media queries, implement flex-direction: column on the parent container and assign order: 1;, order: 2;, and so forth to the child elements in order to arrange them as desired.
Is there a way to create a unique styleClass for the tabbed menu section of the form without affecting anything else? Currently, the CSS I have is applying to everything on the form. a.tab-menu-link:link, a.tab-menu-link:visited { display:block; width:1 ...
The animations for the slider and shuffle lottie are designed to go from 0 to 100 and then back to 0 when toggled, similar to the box animation. However, it appears that the slider animation disappears in the final frame while the shuffle animation appear ...
Having an issue with the dynamic resizing of Divs containing Images in my HTML Table. The Challenge: The Image within a resizable Div gets clipped at the bottom when the height decreases due to window resizing. To view the problem, visit this Example Pag ...
I need help rotating an image by 90 degrees that is positioned between two boxes. The issue I am facing is that the rotated picture overlaps with the two boxes in this scenario. Example 1: Incorrect formatting CSS: .box{ height:50px; width:200px ...
Objective I have successfully implemented a fullscreen video setup that triggers when a link is tapped on a mobile device. To maintain a clean aesthetic, I have hidden the HTML5 video controls using CSS. The desired functionality includes closing the full ...
Imagine I have this html and css snippet h1{ color: rgb(61, 133, 200); font-size: 3em; margin-left: 0px !important; } h1 ~ *:not(h1) { margin-left: 0px; } h2{ font-size: 1.8em; margin-left: 40px !important; } h2 ~ *:not(h2) { ...
Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...
I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...
I'm in the process of creating a custom template for my website and everything was going smoothly until I encountered an issue with the news bar placement. Instead of appearing below the navbar and welcome message bar, it's showing up above the n ...
Earlier, I received some fantastic help for which I am extremely grateful. However, I find myself in need of your expert assistance once again. The website I am currently working on is . After simplifying the code and removing absolute positioning, I enco ...
I'm trying to use jQuery to retrieve the selected radio button and display the text associated with that radio button. <div id="Poll"> <div id="PollQuestion">Your favorite color?</div> <ul> <li class="liAnsw ...
I have a functional bootstrap popover that includes a time attribute. However, I am looking to enhance its functionality so that it remains open when the mouse is on the content and closes only when the mouse leaves the content. Here is the relevant code ...
What is the best method to transform this code snippet: <html:options collection='catList' property='catId' labelProperty='catName'> using the <html:optionsCollection> tag? ...
I'm struggling to align my text in a row, as shown below: https://i.sstatic.net/SGQ8I.png "Investup" and "Real estate" should be aligned. I need to move the "Real estate" paragraph so that it aligns with the "invest up" paragraph. Here's my co ...
Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...
I have come across a tutorial on creating a navigation menu with a logo positioned to the left. However, I now wish to incorporate a hamburger icon for mobile devices and I am unsure about the process. Despite my efforts to find a suitable tutorial onlin ...
I have developed an app that utilizes a checkbox to control the appearance of an overlay on a screen. To ensure smooth transitions, I have incorporated animations into the process. #overlay{ position:absolute; height: 100vh; width: 100vw; ...
Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...
While browsing certain websites on specific browsers that utilize Bootstrap 4 as a framework within a WordPress site, I've noticed some elements displaying strange purple squares when visited. Any ideas on the cause of this issue and how it can be res ...
Is there a way to center page numbers in HTML? I have the code below that echoes the numbers, but they always appear on the left side of the page. I tried wrapping them in a div to center them, which worked, but then each number is enclosed in its own d ...