是否可以按条件用css对div进行排序

Question

我正在使用 Nodejs 项目开发我的 React。 该项目是一个航班应用程序，用户可以在其中关注/取消关注他想要的假期，当他关注它时 - 它应该首先显示（假期是 Bootstrap 中的 Card Divs。） 我处于项目的非常高级阶段，我想知道是否有任何方法可以通过 css 对 Div 进行排序（如果检查输入或其他内容），因为如果没有，我将不得不从头开始。

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;

卡片是从一个假期数组映射的... 我需要按检查的输入对其进行排序。 （即使它已经被映射）

Answer 1

如果您使用 React，通常的做法是对元素数组进行排序，然后将其反映在渲染中。

如果您出于任何原因仍想使用 CSS，请查看此 sn-p：

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>

参考：Is it possible to change the order of list items using CSS3?