CODEWITHSUNDEEP
c#css
john doe
john doe

Reputation: 9700

Inserting Element before another element Using CSS

I have the following code that is generated dynamically using ASP.NET MVC Razor engine: 

<p class="line-item">COLOR</p>
<p class="line-item">HEIGHT</p>
<p class="line-item">WIDTH</p>

Now, I want somehow to move the WIDTH

before height. So this is what I want: 

<p class="line-item">COLOR</p>
<p class="line-item">WIDTH</p>
<p class="line-item">HEIGHT</p>

I want to use CSS or minimal code for this. If this does not work then I will have to change it in C# code.

Upvotes: 0

Views: 57

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10285

You can use CSS3 features Flex method. Using a Flex and orderproperty you can change the sequence of content as well. see the support can i use.

div{display:flex; flex-flow: column;}
p:nth-child(1){order:0;}
p:nth-child(2){order:2;}
p:nth-child(3){order:1;}
 <div>
  <p class="line-item">COLOR</p>
<p class="line-item">HEIGHT</p>
<p class="line-item">WIDTH</p>
  </div>

Upvotes: 3

Blixt
Blixt

Reputation: 50197

I would recommend changing it in C#.

Technically, if these items always have a fixed height, you could make them position: relative; and move one up by setting something like top: -18px and the other down by setting something like top: 18px, but this would be very prone to error.

The only real way to change the order of flowing elements in CSS would be to make them use the flex box model and have them flow vertically. Then you can set the order property to make some elements appear before others. See the link for a full explanation. This might be way too much work for simply changing the order of two elements, however, which is why I think you should change it in C# instead.

If C# really isn't an option, then you can of course also change the order of the elements using JavaScript (I'd recommend looking into insertBefore which would let you move the element with just one call), but again that seems like a lot of hassle compared to simply changing the order in C#.

Upvotes: 0

SurrealSyntax
SurrealSyntax

Reputation: 1375

After it is generated on the page and the DOM has been loaded you cannot change it via CSS you would have to use JQuery/JavaScript for that.

If you want to sort it with CSS on load then I would highly suggest doing that in the back end for reliability and maintenance reasons.

Upvotes: 0

Related Questions