Kod CSS dla układu responsywnego - zmiana wyglądu dla wersji mobilnej - Flexbox?

Question

Witam,
Obrazek poniżej jest szkicem do mojej niedyspozycji. Pytam więc: jak może wyglądać kod .css, aby w wersji desktop układ był taki jak na lewym obrazku, a w wersji mobile lewy obrazek wyglądał tak, jak ten po prawej?
Obecne rozwiązanie jest na scss, ALE czy można to rozpisać np. za pomocą flexboksa. Całość zamknięta jest w jeszcze jednym div.

Pozdrawiam

Answer 1

Obecne rozwiązanie jest na scss

AFAIK, scss i tak finalnie generuje kod css do przeglądarki, więc za pomocą DevTools w przeglądarce możesz sobie podejrzeć kod css.

 

---

Miałem nieodświeżoną zakładkę i nie zauważyłem Twojego komentarza. 

 

.wrapper{display: flex; & > *{padding: 1em;}}
.ankieta{display: block;
@media (max-width: 480px){display:none;}
&_mobile{display:none;
@media (max-width:480px){display:block;}}

wygląda na to, że jest błąd w kodzie scss i zwracany jest kod css nie do końca prawidłowy (dokładnie pojawia się "nieprzetworzony" kod scss).

 

scss

.wrapper {
  display: flex;
  & > * {
    padding: 1em;
  }
}

css

.wrapper {
  display: flex;
}
.wrapper > * {
  padding: 1em;
}

 

scss

.ankieta{display: block;
  @media (max-width: 480px){display:none;}
  &_mobile{display:none;
    @media (max-width:480px){display:block;}
  }
}

css

.ankieta {
  display: block;
}
@media (max-width: 480px) {
  .ankieta {
    display: none;
  }
}
.ankieta_mobile {
  display: none;
}
@media (max-width: 480px) {
  .ankieta_mobile {
    display: block;
  }
}

 

Comments

Dzięki z poświęcony czas.

Gdybyś mógł oznaczyć jeszcze te rozwiązania które są prawidłowe było by super. Ze swojej strony skłaniał bym się do używania .css ZAMIAST .scss.

Pozdrawiam.

---

.containe {
  margin-top: -30px;
  padding: 15px;
  text-align: center;
}
.right-div {
  display: inline-block;
  max-width: 280px;
  text-align: left;
  padding: 20px 5px;
  margin: 10px;
}
.left-div {
  display: inline-block;
  max-width: 300px;
  text-align: left;
  padding: 20px 5px;
  margin: 10px;
  vertical-align: top;
}
.right1-div {
  display: inline-block;
  max-width: 280px;
  text-align: left;
  padding: 20px 5px;
  margin: 10px;
}
.pol-in {
  float: right;
  height: 280px;
  margin-right: 15px;
  position: relative;
  width: 225px;
}
.ankieta { 
  float: right; 
  position: relative; 
  right: 15px;
  width: 240px;
}
.translat {
  margin-right: -120px;
}
.polls {
  line-height: 1.25;
  margin: 0 auto;
  padding: 0 15px 0 5px;
  text-align: center;
}
.wyr { 
  display: block;
}
.wrapper {
  display: flex;
}
.wrapper > * {
  padding: 1em;
}

.ankieta {
  display: block;
}
@media (max-width: 480px) {
  .ankieta {
    display: none;
  }
}
.ankieta_mobile {
  display: none;
}
@media (max-width: 480px) {
  .ankieta_mobile {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .containe {
    margin-top: -15px;
  }
  .right-div {
    max-width: 100%;
    padding: 5px;
  }
  .right1-div {
    max-width: 100%;
    padding: 5px;
  }
  .translat {
    margin-right: 0px;
  }
  .ankieta {
    height: 328px;
    margin: 5px 15px 5px;
    max-width: 100%;
  }
  .left-div {
    max-width: 100%;
    padding: 2px;
  }
  .pol-in {
    left: 5px;
    top: 10px;
  }
}

 

skłaniał bym się do używania .css ZAMIAST .scss

jeżeli to ma być kod jak powyżej, IMO scss nie wiele wnosi. Twój wybór.

---

Dzięki za naprowadzenie - wszystko śmiga tak jak chciałem. Odpowiedź twoją wypunktowałem.

Pozdrawiam

Answer 2

Da się. Zapewne oprócz diva-wrappera masz także bloki zawierające poszczególne elementy strony: 1 i 1a, 2 i 2a, itd. Dla tych bloków ustawiasz odpowiednio właściwość order, która odpowiada za kolejność wyświetlania.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-order

Comments

Dzięki za informację,

Dla uściślenia problemu wstawiam css jaki teraz mam

.containe{margin-top:-30px;padding:15px;text-align:center;}
.right-div{display:inline-block;max-width:280px;text-align:left;padding:20px 5px;margin:10px;}
.left-div{display:inline-block;max-width:300px;text-align:left;padding:20px 5px;margin:10px;vertical-align:top;}
.right1-div{display:inline-block;max-width:280px;text-align:left;padding:20px 5px;margin:10px;}
.pol-in{float:right;height:280px;margin-right:15px;position:relative;width:225px;}
.ankieta{float:right;position:relative;right:15px;width:240px;}
.translat{margin-right:-120px;}
.polls{line-height:1.25;margin:0 auto;padding: 0 15px 0 5px;text-align:center;}
.wyr {display:block;}
.wrapper{display: flex; & > *{padding: 1em;}}
.ankieta{display: block;
@media (max-width: 480px){display:none;}
&_mobile{display:none;
@media (max-width:480px){display:block;}}
@media screen and (max-width: 600px){.containe{margin-top:-15px;}
.right-div{max-width:100%;padding:5px;} .right1-div{max-width:100%;padding:5px;}.translat{margin-right:0px;}
.ankieta{height:328px;margin:5px 15px 5px;max-width:100%;}
.left-div{max-width:100%;padding:2px;} .pol-in{left:5px;top:10px;}}

i dos-tosowany obrazek. Na obrazku : LD= left-div , RD=right-div, ankieta - to miejsce wstawienia sondy. Walidator css zatrzymuje się na 10 /13 wierszu, i dalej zgłasza błąd.