I have a layout where one of my columns holds an ad. See image 1:

![image1](https://i.stack.imgur.com/YzmEu.png)

The ad image is in a four-column div. The ad is an MREC which is 300px wide. However, on the iPad, since the columns reduce, the ad goes down to 236px which is a no-no. See image 2 below, of course it looks the same here but it is smaller:

![image2](https://i.stack.imgur.com/b2ztL.png)

I need it to stay at 300px. Also, sometimes the ad server may serve an iframe-based ad (also 300px).

So that div needs to not shrink width.

I tried adding a class to that did and setting css to min-width:300px, but then on the iPad it sticks out the right edge; the other div does not shrink accordingly enough. See image 3:

![image3](https://i.stack.imgur.com/Go2TB.png)

So, how do I ensure the divs with my ads are not re-sized on the iPad?

EDIT: Also, the problem seems compounded when I reverse the column order with push-pull. I am doing this since I need the ad to come first on the phone but second on other platforms:

```
<div class="row">
<div class="four columns ad push-eight">
    <img src="http://placehold.it/300x300">
</div>
<div class="eight columns pull-four">
  <h1>Bacon ipsum dolor sit amet tri-tip shankle chicken leberkas beef pork</h1>
</div>

```