Why doesn't max-width override min-width?

Question

I\'m trying to create a responsive layout in which two boxes sit next to each other if the screen size allows it, and have them below each other if it doesn\'t. If the boxes

Answer 1

I know, I'm late ... But one exact solution could be this:

p {
    display: inline-block;
    font-size: 15px;
    text-align: left;
    width: 50%;
    border: 1px solid blue;
    min-width: 350px;
}
@media (max-width: 700px) {
  p {
    width:100%;
    display:block;
  }
}