is it possible to sort div's with css by condition

Question

I'm working on my React with Nodejs Project. the project is a flights application where user can follow/unfollow the vacation he wants, and when he follows it - it supposed to be shown first (vacations are Card Divs in Bootstrap.) im in a very advanced stage of the project and i wanted to know if is there any way to sort Div's by css (if input is checked or something) because if not im gonna have to start it all from the beginning.

import React, { Component } from 'react';
    import Switch from "react-switch";
    import apiUrl from './apiUrl';



    class Vacation extends Component {
      state = {
        checked: false,
        vacation: '',
        followdvac: [],
        drawfirst: [],
        drawlast: []

      }



      handleChange(checked, e) {
        debugger;
        var VacationID = e.target.parentElement.parentElement.id
        this.setState({ checked });
        if (checked === true) {
          this.Follow(VacationID)
        }
        else if (checked === false) {
          this.NotFollow(VacationID)
        }
      }


      async Follow(VacationID) {
        let follow = {
          vacid: VacationID
        }
        let response = await fetch(`${apiUrl}/follow?userid=` + this.props.userid, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(follow)
        }); debugger
        let jsonData = await response.json();
        debugger;
        console.log(jsonData)
      }


      async NotFollow(VacationID) {
        let follow = {
          vacid: VacationID
        }

        let response = await fetch(`${apiUrl}/unfollow?userid=` + this.props.userid, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(follow)
        }); debugger
        let jsonData = await response.json();
        debugger;
        console.log(jsonData)
      }

      render() {

        return (


          <div class="col-sm-4 mt-4">
            <div class="card">
              <img class="card-img-top" src="http://www.boostinspiration.com/wp-content/uploads/2011/07/Sun_Photo_01.jpg?__SQUARESPACE_CACHEVERSION=1311474935879" alt="Card image cap" />
              <div class="card-body">
                <h5 class="card-title">{this.props.data.name}</h5>
                <p class="card-text">{this.props.data.description}</p>
              </div>
              <div class="card-footer">
                <h4><b>From: </b>{this.props.data.start} </h4>
                <h4><b>To: </b>{this.props.data.end}</h4>
                <small class="text-muted"><h3><b>Price: </b>{this.props.data.price}$</h3></small>
                <label id={JSON.stringify(this.props.id)} className="Float">
                  <span ></span>
                  <b>Follow</b>:<Switch onChange={this.handleChange.bind(this)} checked={this.state.checked} />
                </label>
              </div>
            </div>
            <br />
          </div>

        )
      }
      async componentDidMount() {

        let AllFollowed = []
        let AllUnfollow = []
        let Response = await fetch(`${apiUrl}/userfollow?id=` + this.props.userid);
        let Followed = await Response.json();

        // let Response1 = await fetch(`${apiUrl}/byorder?id=` + this.props.userid);
        // let Followed1 = await Response.json();

        this.setState({ followdvac: Followed });
        // console.log(Followed1)

        let VACATIONS = this.props.Vacations 
        let Fol = this.state.followdvac

        VACATIONS.map(v => {
          let Filter = Fol.FollowArr.filter(f=>f==v.id)
          if (Filter.length == 0 ){
            AllUnfollow.push(v)
          }
          else{
            AllFollowed.push(v)
          }
        }) 

 this.setState({drawfirst:AllFollowed, drawlast:AllUnfollow}) 




        this.MarkChecked()

      }

      MarkChecked() {
        var id = this.props.id

        debugger;
        for (let i = 0; i < this.state.followdvac.FollowArr.length; i++) {
          if (this.state.followdvac.FollowArr[i] === id) {
            debugger;
            this.setState({ checked: true })
          }
        }
      }


    }
    export default Vacation;

the card is Mapped from a Vacation array... and i need to sort it by the checked inputs. (even though it is already mapped)

Answer 1

If you use React it is a common pratice to sort an array of elements and then reflect it on render.

If you still want to go with CSS for any reason, checkout this snippet:

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

ref: Is it possible to change the order of list items using CSS3?