flex columns

by ian_smithz

HTML

<div class="flex-container">

					<div class="flex-main-col delivery-text">

						<div class="help-pad">

							<p>At Screwfix we are passionate about getting your goods to you quickly and we understand it 
							is important for you to know when your order will be delivered.</p>

							<p>We deliver to your home or work address - whichever is more convenient for you to be able 
							to sign for delivery.</p>

							<p>Delivery Option: Standard Delivery<br>
							Delivery Charge: &euro;8.95, FREE for orders over &euro;70.00<br>
							Delivery Time: 2 to 3 working days, excluding weekends and public holidays.</p>

						</div>

					</div>

					<div class="flex-main-col delivery-boxes flex-main-col--gutter-left sm-hide md-hide">

						<div class="help-delivery-alt"> </div>

					</div>

				</div>

CSS

/* delivery page has two containers on same row - built in flex (works in IE11) */
.flex-container {
  display:flex;
}

.flex-main-col {
    border: 1px solid #d1d1d1;
    background-color: #fff;
    margin-bottom: 12px;
    display:flex;
}

.flex-main-col--gutter-left {
    margin-left: 12px
}

.flex-main-col.delivery-text {
    flex: 1 1 auto;
}

.flex-main-col.delivery-boxes {
    flex: 0 0 auto;
    width: 300px;
}
     display:none
    }
}

.flex-main-col .help-delivery-alt {
    background: url('/media/wysiwyg/banners/2017/ie_service/about-service-blocks-sprite.jpg') no-repeat;
    background-position: 100% -627px;
    width: 100%;
}


@media only screen and (max-width: 767px) {
    .sm-hide {
        display: none;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .md-hide {