Css reorder image and text

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,

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,

/* 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,

$("#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.