Open your Main.storyboard file and select a device that has a compact width, such as an iPhone Xs, for instance. Select the six labels in the contact info view and embed them in a stack view by using the Embed In menu as shown in the following screenshot.

Now find the stack view in the Document Outline and drag it up so that it ends up above the view that currently contains it. Once you have done this, the stack view is no longer a child view of that view so you can remove it. Move the stack view to roughly to the position that the old view was in.

The next step is to select the notes label and the text field and embed them in a stack view too using the Embed In menu. Drag this stack view out from its parent view as well so it ends up on the same level in the Document Editor as the other stack view you just created. Remove the remaining, empty view as well and position the new stack view roughly where the old view was positioned.

Select both stack views and use the Embed In menu once more to embed the stack views in another stack view so both stack views are placed on top of each other. You are now ready to add some constraints that position the newly created stack view. You will need to add the following constraints:

• The stack view's top should be positioned 40 points below the name label's bottom.
• The stack view's left edge should be positioned 8 points from the superview's left edge.
• The stack view's right edge should be positioned 8 points from the superview's right edge.
• The stack view's bottom should be positioned 8 points from the superview's bottom.

Add these constraints using the Ctrl + drag technique. You can either drag within the views itself or you can use the Document Outline for easy access by dragging from the stack view to its superview.

After you have added the constraints, your layout should resemble the following screenshot:

This is quite close to the layout you implemented before but it's not quite the same yet. To achieve the same effect, you're going to have to tweak some settings on the stack view. Select the stack view and look at the Attributes Inspector. You'll find that there are a couple of settings that you can configure. The settings you should look at for now are Spacing, Distribution, and Alignment. First, update the Spacing and set it to 16. This value controls the amount of space between each of the stack view's children. In this case, the only two children are the stack views that contain the contact's details and the notes area.

After adjusting the spacing, update the Distribution property so it is set to Equal Spacing; this will make sure that the stack view does everything it can to make sure the spacing between its children is always the same. In this case, you won't find much difference but you'll find that this property can be crucial to set in some other cases.

Lastly, set the Alignment to be Fill. This setting makes sure that items are positioned a certain way within the stack view. In this case, Leading makes the items stick to the left side of the stack view. Setting this value to Center would align them in the middle and Fill ensures that the stack's children are all stretched out to fill the entire width.

Once you have adjusted the stack view's configuration, you'll see that the layout looks exactly as planned for the compact size class. The regular size class still needs some work though because it doesn't lay out the bottom views in a two-column layout anymore with this setup. To fix this, select a device with a large screen and begin a Vary for Traits session.

Select the outer stack view and go to the Attributes Inspector. Using the plus icon next to the Axis setting, you can add a variation for the current size class configuration (regular width). Instead of setting the Axis to Vertical, you should set it to Horizontal and the stack view will update the view on large screens so the column is a two-column layout again.

To make sure both views are the same size, add a variation for Distribution as well and select Fill Equally instead of Equal Spacing. This setting ensures that all children of the stack view take the same amount of space on the layout axis. In this case, this means both child views will have the exact same width within the stack view.

You can now click Done varying and run your app on several devices. You'll find that the layout adapts perfectly with significantly fewer constraints in the bottom section of the app. Quite neat, right?