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)

Why do you have to start from the beginning? You sure keep an array or map of data you render to html. Can't you sort that? — Moritz Roessler, Feb 19 '19 at 09:32
Welcome to SO. Please [see](https://stackoverflow.com/help/how-to-ask). Also, probably all you need is sorting the state and show this to the user as @MoritzRoessler suggested. — devserkan, Feb 19 '19 at 09:33
this is Front-End Application, with users that can login the website and admin that can change the content of the vacations (update happens with Socket.io), i already applied the update in real-time (of the Vacations) for the user that logged in - on the Main Vacations array which i took from the Database. like i said - each vacation has checkbox - the user can follow it , and followed vacation must be shown first — Àtishking, Feb 19 '19 at 09:51
Ok, so don't you have a state on that application? You can track the checked or followed items and sort your data, then render it according to an update. Without seeing any code (actually working a minimal code) all we can do here is giving blind suggestions. — devserkan, Feb 19 '19 at 09:55

score 0 · Answer 1 · answered Feb 19 '19 at 09:39

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?

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

1 Answers1