Установка адаптивности картинки и формы?

Question

[user57765]

Есть форма с картинкой, где форма расположена с правой стороны на пол страницы, а картинка с левой. Кто может помочь сделать так чтобы в мобильной версии картинка была с верху, форма с низу?

.imgBox {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: url(/assets/img/wallpaper.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

#leftLayer{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -999;
}
  
#formBox {
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 50%;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  margin-left: 50%;
  position: absolute;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.topLayer {
  width: 200%;
  height: 100%;
  position: relative;
  left: 0;
  left: -100%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
  
.left {
  width: 50%;
  height: 100%;
  background: #2C3034;
  left: 0;
  position: absolute;
}
  
.right {
  width: 50%;
  height: 100%;
  background: #f9f9f9;
  right: 0;
  position: absolute;
}

Answer 1

[boga-net]

https://jsfiddle.net/ouodkeLn/58/

<div class="wrapper">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvpxsiRMRqDwDDz98cw93Cm3-8_h6orA-FZJOAfwfTbY9WdtAl" alt="">
  <form>
    <input type="text">
    <input type="text">
  </form>
</div>

.wrapper {
  display: flex;
}
form {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 600px) {
  .wrapper {
    flex-direction: column;
  }
}