按钮需要Flex对齐辅助

Question

我有一个正在构建的页面，我想为mobile重新组织div。我想让按钮1-3在左边，公司名称在中间，按钮4-6在右边，用于大于600像素的屏幕，同时重新组织到顶部的公司名称，按钮1-3在公司名称下方的左边，按钮4-6位于公司名称下方。

当我插入我发布的代码时，除了按钮4-6之外，大多数情况都比按钮1-3低一点，我希望它们是均匀的。

感谢您的帮助。

.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>

Answer 1

当小于600px时，将margin: 0;添加到.buttonRightDiv