Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello all,

I have a function that creates automatically some HTML to show a text and an image for each recordset in a database.

The scheme is this one:

HTML
<div class="FonsGrisClarProjectes">
  <div class="FonsGrisClarProjectesText"> Text_1 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_1 </div>
</div>
<div class="FonsGrisClarProjectes">
  <div class="FonsGrisClarProjectesImatge"> Image_2 </div>
  <div class="FonsGrisClarProjectesText"> Text_2 </div>
</div>
<div class="FonsGrisClarProjectes">
  <div class="FonsGrisClarProjectesText"> Text_3 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_3 </div>
</div>


As you can see I'm generating the code to alternate the text and the image. This looks nice in the PC/full version of the site.

I would like to be able to reorder the images in the mobile version of the web page.

I have already created specific css for the mobile using "@media only screen and (max-device-width: 480px) {" and it works, but I still don't know how to reorder two divs at will using CSS.

Is it possible doing that only using CSS? If it is possible... how would you do it?

The CSS code That is related to this:
CSS
.FonsGrisClarProjectes{
    background-color: #F5F5F5;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.FonsGrisClarProjectesText{
    font: 11pt Arial, Helvetica, sans-serif;
    background-color: #F5F5F5;
  color:#000000;
  text-align: left;
  width: 90%;
  padding-top: 20px;
  margin-left: 8%;
}

.FonsGrisClarProjectesImatge{
  width: 90%;
}

.FonsBlancProjectes{
    background-color: #FFFFFF;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.FonsBlancProjectesImatge{
  width: 90%;
}

.FonsBlancProjectesText{
    font: 11pt Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
  color:#000000;
  text-align: left;
  width: 90%;
  padding-top: 20px;
  margin-left: 8%;
}

.ImatgeProjecte{
    max-width: 80%;
}


Thank you!

What I have tried:

Tried to float the image div to the left and the text div to the right. (No effect)

Tried to set relative and absolute positions (but this puts all the images at the top of the web page).
Posted
Updated 20-Feb-17 1:52am
v2

1 solution

Skip this one.
It will be very much tough in CSS, it would be possible by using some absolute positioning and changing the positions of the elements. But that will not help, only make it more difficult and messier.

However, if you introduce JavaScript to this. You can easily reorder the elements. For example, this simple thread on SO[^] shows this,
function swapSibling(node1, node2) {
  node1.parentNode.replaceChild(node1, node2);
  node1.parentNode.insertBefore(node2, node1); 
}

window.onload = function() {
  swapSibling(document.getElementById('div1'), document.getElementById('div2'));
}

That uses native JavaScript code, and swaps the siblings. In your case, you can do the following,
JavaScript
var parentElement = document.getElementsByClassName("FonsGrisClarProjectes");
function swapSibling(node1, node2) {
  parentElement.replaceChild(node1, node2);
  parentElement.insertBefore(node2, node1); 
}

// Where node1 and node2 and text or image. 


Skip the above solution — I want it to be there on purpose
You should consider using flexbox[^]. What I will need to do is, apply either an ID to the element, or use their classnames. The disadvantage of class names is that you get multiple objects, and then you have to traverse which one was which (especially when you rewrite or reorder them). Thus, having ID will help in most cases.

I would rewrite your HTML to,
<div class="container">
<div class="FonsGrisClarProjectes" id="first">
  <div class="FonsGrisClarProjectesText"> Text_1 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_1 </div>
</div>
<div class="FonsGrisClarProjectes" id="second">
  <div class="FonsGrisClarProjectesImatge"> Image_2 </div>
  <div class="FonsGrisClarProjectesText"> Text_2 </div>
</div>
<div class="FonsGrisClarProjectes" id="third">
  <div class="FonsGrisClarProjectesText"> Text_3 </div>
  <div class="FonsGrisClarProjectesImatge"> Image_3 </div>
</div>
</div>

Then, in the CSS, I can do the following trick,
CSS
/* works with classes as well as IDs */
.container{
  display: flex;
  flex-direction: column;
}

#first {
  order: 2;
}

#third {
  order: 1;
}

This will render the objects in the flex.

For an example, please have a look at the following link, Edit fiddle - JSFiddle[^]

Lastly, remember CSS does not include logic, so once written it will work that way. To update based on interests, you can use JavaScript to write the CSS. Such as,
JavaScript
$("#first").css("order", 1); // etc. 

If you do not need to update the CSS on runtime (viewtime?), then the default CSS is enough, however to update based on any interest or logic, JavaScript will jump in.
 
Share this answer
 
v3
Comments
Joan M 20-Feb-17 8:03am    
Thank you Afzaal, I've been trying to use the display: table and the header/footer tricks, but or this is not working on classes or I'm much more terrible than I've thought...

Anyway your solution works wonderfully well.

Thank you very much for your help.

5ed and accepted. :thumbsup:
Afzaal Ahmad Zeeshan 20-Feb-17 8:04am    
Ironically, it was just a Google search away. ;-)

But thank you, and you're welcome.
Joan M 20-Feb-17 8:41am    
:OMG: I can promise you I've been looking for it at google... my G-Fu is not working well... ^^¡
Karthik_Mahalingam 20-Feb-17 8:24am    
5
Afzaal Ahmad Zeeshan 20-Feb-17 8:29am    
Thank you, Karthik!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900