I have a page I am building that I want to reorganize the div's for mobile. I want to make buttons 1-3 on the left, company name in middle, and buttons 4-6 on right for larger than 600px screens while reorganizing to company name on top, buttons 1-3 on left below company name and button 4-6 on right below company name.

When I insert the code I have posted, most of this happnes except buttons 4-6 are a little lower than buttons 1-3 and I want them to be even.

Any help is appreciated.

  .wrapper {
  width: 100%;
  height: 700px;
  background-image: url("http://websiteillusions.com/pow/images/forest.jpg");
  background-size: 100%;
}

.buttonDiv {
  display: flex;
  flex-flow: row;
  width: 100%;
  margin: auto;
  padding-top: 10%;
  padding-left: 5%;
}

.buttonLeftDiv {
  order: 1;
  width: 20%;
  margin: auto;
}

.buttonMidDiv {
  order: 2;
  width: 60%;
  margin: auto;
}

.buttonRightDiv {
  order: 3;
  width: 20%;
  margin: auto;
}

.button {
  width: 50%;
  height: 55px;
  border-radius: 25px;
  color: white;
  padding: 5px;
  margin: 15px;
  background-image: linear-gradient(-140deg, #16a30c, #1e442d);
}

@media only screen and (max-width: 600px) {
  .wraper {
    width: 100%;
    height: 1200px;
  }
  .buttonDiv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 1200px;
    padding-top: 0%;
    padding-left: 0%;
    background-image: url("http://websiteillusions.com/pow/images/forest.jpg");
  }
  .button {
    width: 90%;
    height: 55px;
    border-radius: 25px;
    color: white;
    padding: 5px;
    margin: 15px;
    background-image: linear-gradient(-140deg, #16a30c, #1e442d);
  }
  .buttonLeftDiv {
    order: 2;
    width: 45%;
    flex: 45%;
    margin-top: 0%;
    padding-top: 0%;
  }
  .buttonRightDiv {
    order: 3;
    width: 45%;
    flex: 45%;
  }
  .buttinMidDiv {
    order: 1;
    width: 100%;
    margin-bottom: 0%;
    padding-bottom: 0%;
  }

<div class="wrapper">
  <div class="buttonDiv">
    <div class="buttonMidDiv">
      <div>
        <p style="font-family: Archivo; text-align: center;"><span style="font-size: 48pt; line-height: 1.3em;"><span style="color: #16a30c;">Company</span> <span style="color: #1e442d;">Name</span> <span style="color: #16a30c;">Here</span></span>
        </p>
      </div>
      <div>
        <p style="text-align: center;"><span style="font-size: 24pt; color: #ffffff;">Some Words here</span></p>
      </div>
    </div>
    <div class="buttonLeftDiv"><button type="button" class="button">Button 1</button> <br /> <button type="button" class="button">Button 2</button> <br /> <button type="button" class="button">Button 3</button></div>
    <div class="buttonRightDiv"><button type="button" class="button">Button 4</button> <br /> <button type="button" class="button">Button 5</button> <br /> <button type="button" class="button">Button 6</button></div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add margin: 0; to .buttonRightDiv when less than 600px