Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items.
<div class="wrapper">
<div class="something">
<img src=""></img>
<p>PARAGRAPH</p>
</div>
<h1>TITLE</h1>
<h4>SUBTITLE</h4>
</div>
Attempting to move the paragraph below the title and subtitle. See my codepen for an example here.
Any suggestions on how to accomplish this?
The order property is responsible for rearranging flex items within the same container.
In your HTML code, the element with the class .something is a flex item along with its sibling elements h1 and h4. The children of .something are in a separate container, so they cannot be reordered within the main container and its siblings.
If it's not essential to keep your image and paragraph in a separate container, you can place them within the main container and reorder them as needed.
For example:
.wrapper {
text-align: center;
display: flex;
flex-direction: column;
}
img {
height: 300px;
align-self: center;
}
p {
order: 3;
}
h1 {
order: 1;
}
h4 {
order: 2;
}
<div class="wrapper">
<img src="image.jpg"></img>
<p>Your content here</p>
<h1>Main title</h1>
<h4>Subtitle</h4>
</div>
To achieve this type of rearrangement, utilizing table display properties can be beneficial:
img {
height: 300px;
}
.wrapper {
text-align: center;
display: table;
margin: auto;
}
.something {
display: table-row;
}
p {
display: table-footer-group;
}
h1 {
display: table-caption
}
h4 {
display: table-header-group;
}
* {
margin: 0
}<div class="wrapper">
<div class="something">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Puffer_Fish_DSC01257.JPG/1280px-Puffer_Fish_DSC01257.JPG" />
<p> ICONS HERE </p>
</div>
<h1>TITLE</h1>
<h4>SUBTITLE</h4>
</div>However, it might be wise to ensure the correct order in the HTML structure for better organization :)
I have encountered an issue while using CanvasJS to generate a line graph with data from Myo. The problem is that when new data is received, the graph fails to update. This may be due to the fact that I did not initially populate the graph with any data po ...
I seem to be having trouble with the table styles when I include text in the <td> section: <td rowspan="3"> 30th May 2014 17:35... What could be the issue? <style type="text/css"> .tftable {font-size:12px;color:#333333;width:100%;borde ...
My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...
<table id="selectsupp"> <tr> <td> <select id="category"> <option value="display" readonly="true">-Shop By Category-</option> <option value="all">All</option> <option val ...
Currently, I am working on implementing an in-place editor using jQuery. The functionality is such that when you click on the text you wish to edit, it will replace the content with an input field, specifically a select tag. Everything seems to be functio ...
I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...
As a newcomer to web design, I've been struggling to figure out why my basic grid in Bootstrap 3 isn't working as expected. No matter what I try, my columns stack vertically instead of side by side and always resize to fill the browser window. Th ...
Upon visiting using IE7, you may notice that the two middle columns are being pushed down to the bottom of the page. I have attempted to resolve this issue by applying display:inline to both columns without success. Any assistance on this matter would be ...
UPDATED: Here is a real-life scenario I am facing: I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example: The Table was initially set to 100%, like this: <table width=100% ...> The total number ...
Let's say there is a div element on the page like this: <div class="center"></div> The CSS style for this div may look something like this: .center{ background:red; position:absolute; left:50%; top:50%; margin-left: ...
Here's the HTML markup I'm working with: <picture> <source srcset="img/home-page/placeholders/placeholder_2560.jpg" media="(max-width: 2560px)"> <source srcset="img/home-page/placeholders/placeh ...
Once I hit the submit buttons, there seems to be an issue with redirecting to another page. Could anyone assist in identifying the error within this code and why my buttons "typ1" and "cod" are not redirecting to the specified location? <?php inc ...
I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...
Currently utilizing "bootstrap": "~3.3.4" within the mean.js framework, I am facing an issue with the navbar dropdown menu. On desktop, everything functions as expected - the dropdown opens and remains open when the icon is clicked. However, once deployed ...
How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...
Currently diving into Django and encountering a hurdle with static files. I've followed the setup in both the settings and HTML, but unfortunately, they are not loading on the website. Seeking assistance to resolve this issue! **settings.py:** STATIC ...
I have frequently used the replace function to eliminate classes in JavaScript. Currently, I am working on creating a JavaScript function that allows me to remove a specific class from an element by passing in the element and the class name. changeAddress ...
https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...
I wanted to incorporate a feedback feature into my web application. To do this, I searched on Google and found a suitable jQuery plugin. I followed the documentation provided by the plugin, including the library in my HTML file, and then wrote the code as ...
TABLE1: table1ID | studentnum | lname | fname | mname TABLE2: table2ID | studentnum | remarks | others //FORM 1 CODE $sql = "INSERT INTO TABLE1 (studentnum, lname, fname, mname) VALUES ('$studentnum','$lname','$fname','$ ...