.order-details { display: flex; justify-content: space-between; flex-wrap: wrap; } .order-detail { margin-right: 20px; margin-bottom: 10px; } .order-detail strong { font-weight: bold; } @media (max-width: 600px) { .order-details { display: block; margin: 0; } .order-detail { margin: 10px 0; text-align: right; } } @media (min-width: 601px) and (max-width: 1024px) { .order-details { display: flex; flex-wrap: wrap; justify-content: flex-start; } .order-detail { margin-right: 15px; margin-bottom: 10px; } } .order-details { display: flex; justify-content: center; flex-wrap: wrap; } .order-detail.order-number { background: #ffffff; padding: 10px 15px; box-shadow: 0px 0px 35px #4d5f761c; border-radius: 7px; border: 1px solid #0000000a; color: #3c3c3c; font-weight: 400; font-size: 13px; } .order-detail.order-date { background: #ffffff; padding: 10px 15px; box-shadow: 0px 0px 35px #4d5f761c; border-radius: 7px; border: 1px solid #0000000a; color: #3c3c3c; font-weight: 400; font-size: 13px; } .order-detail.order-email { background: #ffffff; padding: 10px 15px; box-shadow: 0px 0px 35px #4d5f761c; border-radius: 7px; border: 1px solid #0000000a; color: #3c3c3c; font-weight: 400; font-size: 13px; } .order-detail.order-total { background: #ffffff; padding: 10px 15px; box-shadow: 0px 0px 35px #4d5f761c; border-radius: 7px; border: 1px solid #0000000a; color: #3c3c3c; font-weight: 400; font-size: 13px; } .order-detail.order-payment-method { background: #ffffff; padding: 10px 15px; box-shadow: 0px 0px 35px #4d5f761c; border-radius: 7px; border: 1px solid #0000000a; color: #3c3c3c; font-weight: 400; font-size: 13px; }