UI For Selecting Column Width

I'm creating an application that builds a form using simple UI options (a la Cognito or Wufoo).
My current issue is that I'm trying to think of a way to display an option to define the width of the selected column, such that the user can define the column size (the user sees it as just an element such as a text input box, but from a DOM perspective, it's inside a column).

I've broken the column sizes down into 6 grids (based off bootstraps 12 column grid), but would like to have the default options show just 4. This is because most times the user is going to just need the simple options for column sizes between 1-4 (that is to say between 1/4th of the width, all the way to full width), but on occasion someone creating a fancy form might need the option to break a column width down to a 6th of the full width.

So what I need is a simple UI that allows for this kind of configuration. I've played around with some options, but what I have right now seems a bit too complicated and takes up too much space.

So for example, the below image has configuration to select widths based on 1-4, but then allows 1-6 if you click the drop down. What would be beneficial is if I had a single UI to take into account the different sizes, and have it done in such a way that it's mobile friendly (that means no extraordinarily small click zones that only a mouse can click).

Update

In order to have 1-4 but also an expanded option, it needs to extend to 1-8 (not 1-6).
An approach that moves in the direction I'm looking for would be something like the following, where the user could select any of the increments. The trouble with that though is that by default it presents too many options for the average user who is typically going to want the sizes 1/4, 1/2, 3/4, and full.