Div under another in response mode

Question

I am working on a jsfiddle project and cannot find a solution to put my left div background image under my right div menu in responsive mode.

At this time, my background image of the div remains on top, under my div menu.

Here is my link: Jsfiddle

BROWSER

(1) this is what I have, and (2) what I want

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.total {
  box-sizing: border-box;
  height: 100%
}

.dessus {
  width: 30%;
  min-height: 100%;
  float: right;
  background: #EEF;
}

.spaceone {
  margin: 0px 50px 0px 50px;
  display: block
}

.sub-spaceone {
  margin: 0px 50px 50px 50px;
  display: block;
}

.space {
  margin: 0px 50px 0px 50px;
  display: block
}

.pos {
  position: fixed;
  bottom: 50px;
  float: left;
}

.dessous {
  width: 70%;
  min-height: 100%;
  float: left;
  background: url(http://www.work.booclin.ovh/wp-content/uploads/2017/04/Unknown-7.jpeg) no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width:1024px) {
  .total {
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  .dessous {
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  .dessus {
    width: 100%;
    min-height: 0px;
  }
  .pos {
    position: relative;
    bottom: 0px;
    float: none;
    margin: 30px 50px;
  }
  .spaceone {
    margin: 0px;
    float: left;
    display: block
  }
  .sub-spaceone {
    display: none
  }
  .space {
    margin: 0px 30px 30px 0px;
    display: inline;
    float: right;
  }
}

@media screen and (max-width:600px) {
  .pos {
    margin: 50px auto;
    display: block;
    float: none;
  }
  .spaceone {
    margin: 30px auto;
    display: block;
    float: none;
  }
  .space {
    margin: 10px 20px;
    display: inline;
    float: none;
  }
}

@media screen and (max-width:300px) {
  .pos {
    margin: 50px auto;
    display: block;
    float: none;
  }
  .spaceone {
    margin: 30px auto;
    display: block;
    float: none;
  }
  .space {
    margin: 10px auto;
    display: block;
    float: none;
    text-align: center;
  }
}

<div class="total">


  <div class="dessus">

    <div class="pos">
      <span class="spaceone">Title</span>
      <span class="sub-spaceone">Sub-Title</span>
      <span class="space">Menu 1</span>
      <span class="space">Menu 2</span>
      <span class="space">Menu 3</span>
    </div>

  </div>


  <div class="dessous"></div>
</div>

Run code

Answer 1

Removed fixed from .dessous:

.dessous {
    background: url(http://www.work.booclin.ovh/wpcontent/uploads/2017/04/Unknown-7.jpeg) no-repeat top center;
}

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.total {
  box-sizing: border-box;
  height: 100%
}

.dessus {
  width: 30%;
  min-height: 100%;
  float: right;
  background: #EEF;
}

.spaceone {
  margin: 0px 50px 0px 50px;
  display: block
}

.sub-spaceone {
  margin: 0px 50px 50px 50px;
  display: block;
}

.space {
  margin: 0px 50px 0px 50px;
  display: block
}

.pos {
  position: fixed;
  bottom: 50px;
  float: left;
}

.dessous {
  width: 70%;
  min-height: 100%;
  float: left;
  background: url(http://www.work.booclin.ovh/wp-content/uploads/2017/04/Unknown-7.jpeg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width:1024px) {
  .total {
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  .dessous {
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  .dessus {
    width: 100%;
    min-height: 0px;
  }
  .pos {
    position: relative;
    bottom: 0px;
    float: none;
    margin: 30px 50px;
  }
  .spaceone {
    margin: 0px;
    float: left;
    display: block
  }
  .sub-spaceone {
    display: none
  }
  .space {
    margin: 0px 30px 30px 0px;
    display: inline;
    float: right;
  }
}

@media screen and (max-width:600px) {
  .pos {
    margin: 50px auto;
    display: block;
    float: none;
  }
  .spaceone {
    margin: 30px auto;
    display: block;
    float: none;
  }
  .space {
    margin: 10px 20px;
    display: inline;
    float: none;
  }
}

@media screen and (max-width:300px) {
  .pos {
    margin: 50px auto;
    display: block;
    float: none;
  }
  .spaceone {
    margin: 30px auto;
    display: block;
    float: none;
  }
  .space {
    margin: 10px auto;
    display: block;
    float: none;
    text-align: center;
  }
}

<div class="total">


  <div class="dessus">

    <div class="pos">
      <span class="spaceone">Title</span>
      <span class="sub-spaceone">Sub-Title</span>
      <span class="space">Menu 1</span>
      <span class="space">Menu 2</span>
      <span class="space">Menu 3</span>
    </div>

  </div>


  <div class="dessous"></div>
</div>

Run code