Позиция заказа не работает с медиа-запросом

Question

Некоторое время боролся с этим. Я хочу изменить порядок div, когда он находится в мобильном режиме. Другими словами, когда медиа-запрос @media only screen and (max-width: 375px). Рассматриваемый div - это ряд кнопок. Вот как я хочу, чтобы это выглядело. , и это то, что я

В основном я хочу, чтобы кнопки появлялись на кнопке как в правильном примере. Всякий раз, когда я что-то меняю, я получаю правильную мобильную версию, но версия для настольного компьютера неверна. Также просто хотел сказать, что приложение построено с использованием React. Ниже приведен код для html:

<div className={darkMode ? "card-dark-mode" : "card-light-mode" }>

      <NavBarCard handlechange={()=> setDarkMode(prevMode => !prevMode)} moonMode={darkMode ? "moon fas fa-moon" :
        "moon far fa-moon"}
        darkMode={darkMode ? "dark-mode" : "light-mode"}/>
        <div className="detailCard">
          <Link to="/">
          <button className="topButton myButton">
            <i class="fas fa-arrow-left"></i>Back
          </button>
          </Link>
          <div className="container">

            <img className="flag" alt="flag" src={country.flag} />
          <div className="borderName">
            <div className="countryName">

              <div className="NativeName">
                <h1 className="Country">{country.name}</h1>
                <h2>Native Name:</h2>
                <p> {country.nativeName}</p>
                <br />
                <h2>Population:</h2>
                <p> {country.population}</p>
                <br />
                <h2>Region:</h2>
                <p> {country.region}</p>
                <br />
                <h2>Sub Region:</h2>
                <p> {country.subregion}</p>
                <br />
                <h2>Capital:</h2>
                <p> {country.capital}</p>
                <br />
              </div>

            </div>
            <div className="borderCountries">
                  <h2>Border Countries:</h2>{country.borders
                  ? country.borders.map((border) => (
                  <button className="myButton" onClick={()=> {
                    fetchItem(border);
                    history.push(`/DetailCard/${border}`);
                    }}
                    >
                    {border}
                  </button>
                  )):null}
              </div>
            </div>
            <div className="domain">
                <h2>Top Level Domain: </h2>
                <p>{country.topLevelDomain}</p>
                <br />
                <h2>Currencies: </h2>
                <p>{country.currencies && country.currencies.map(({ name }) => name).join(", ")}</p>
                <br />
                <h2>Languages: </h2>
                <p>{country.languages && country.languages.map(({ name }) => name).join(", ")}</p>
                <br />
              </div>
          </div>
        </div>

    </div>

Ниже приведен css:

     .detailCard {
     /* position: relative; */
     padding-top: 50px;
     }
    .Country {
    text-align: justify;
    }

  .card-light-mode {
  background-color: #fff;
  color: #333;
  }

 .card-dark-mode {
 height: 1400px;
 background-color: hsl(207, 26%, 17%);
 color: hsl(0, 0%, 100%);
 /* height: 1400px; */
 }


 h2 {
 padding-right: 15px;
 }

 h2,
 p {
 display: inline-block;
 }

 .container {
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 padding-left: 50px;
 }

.flag {
position: relative;
right: 75px;
border-radius: 2px;
padding: 15px;
width: 500px;
}

.domain {
padding-top: 65px;
}

.myButton {
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color: #ffffff;
border-radius: 6px;
border: 2px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
/* font-family:Arial; */
font-size: 15px;
font-weight: 600;
margin: 4px 4px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}

.myButton:hover {
background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color: #f6f6f6;
}

 .myButton:active {
  position: relative;
  top: 1px;
  }

.topButton {
position: relative;
left: 150px;
 }

@media only screen and (max-width: 375px) {
.container {
 display: flex;
 flex-direction: column;
 width: fit-content;
 }

.borderCountries {
 order: 1;
 }

 .card-dark-mode {
 width: fit-content;
 }

.flag {
display: block;
margin-left: 50px;

}

.topButton {
 position: relative;
 left: 30px;
 bottom: 20px;
 }

.domain {
 padding-top: 30px;
 }
}

Версия компонента для настольного компьютера выглядит следующим образом: . Как видите, кнопки границ стран появляются под столицей. Любая помощь будет оценена. Извинения, если это кажется длинным объяснением.

Answer 1

Я видел ваш код, и по текущей структуре трудно достичь того, что вы хотите, но если вы сможете изменить структуру HTML, это будет очень легко, так что, как я вижу, у вас проблемы с Правая сторона div на рабочем столе и на мобильном телефоне, чтобы заказать кнопки div. вот решение.

.borderName {
  display: flex;
  flex-wrap: wrap;
}

.borderCountries {
  width: 100%;
  order: 2;
}
.countryName, .domain {
  width: 50%;
}

@media(max-width: 375px){
  .borderName {
    flex-direction: column;
  }
}

<div class="borderName">
                    <div class="countryName">
                        <div className="NativeName">
                            <h1 className="Country">{country.name}</h1>
                            <h2>Native Name:</h2>
                            <p> {country.nativeName}</p>
                            <br />
                            <h2>Population:</h2>
                            <p> {country.population}</p>
                            <br />
                            <h2>Region:</h2>
                            <p> {country.region}</p>
                            <br />
                            <h2>Sub Region:</h2>
                            <p> {country.subregion}</p>
                            <br />
                            <h2>Capital:</h2>
                            <p> {country.capital}</p>
                            <br />
                        </div>
                    </div>
                    <div class="borderCountries">
                        <h2>Border Countries:</h2>{country.borders
                        ? country.borders.map((border) => (
                        <button className="myButton" onClick={()=> {
                            fetchItem(border);
                            history.push(`/DetailCard/${border}`);
                            }}
                            >
                            {border}
                        </button>
                        )):null}
                    </div>
                    <div class="domain">
                      <h2>Top Level Domain: </h2>
                      <p>{country.topLevelDomain}</p>
                      <br />
                      <h2>Currencies: </h2>
                      <p>{country.currencies && country.currencies.map(({ name }) => name).join(", ")}</p>
                      <br />
                      <h2>Languages: </h2>
                      <p>{country.languages && country.languages.map(({ name }) => name).join(", ")}</p>
                      <br />
                    </div>
                </div>

работает codepen Пример здесь, в котором вы можете увеличивать и уменьшать размер экрана.

, если я что-то ошибаюсь, просто поправь меня, я бы с радостью помог.