Open the Main.storyboard and select a compact-width device, iPhone 6, for instance. Start by removing the entire view that contains the six contact information labels. Then, look for UIStackView in the Object Library. You'll notice that you can either select a vertical or a horizontal stack. We'll need a vertical stack; drag it out to the storyboard.

Next, drag a UILabel out from the Object Inspector. Drag it right to the Document Outline on the left side and drop it in the stack view. This is easier than dropping it in the view and trying to get it on the stack view because there are all kinds of layout errors right now.

Once you've added the UILabel, rearrange the views so they are positioned roughly the same as before. Manually resize the scroll view's content view if it will make your job easier. Once you've done this, constrain the stack view eight points from the left, bottom, and right of the superview. Also, constrain the vertical space between the notes container view and the stack view to 8 points.

If you update the frames now, you should end up with a result similar to the following screenshot:

Now, switch to a regular-width device and vary for this width trait. Select the vertical constraint between the stack view and the notes section and deactivate it for the Regular Width, Any Height, and Any Gamut configuration. Similar to how we deactivated constraints earlier, deactivate the constraint that places the right edge of the stack view 8 points from the superview.

Manually rearrange the views so that they look as they did before for Regular Width and add the required constraints. You will need an equal-width constraint between the left and the right, a horizontal spacing constraint of 8 points between the left and the right, and finally a vertical spacing constraint between the contact name and the stack view.

After adding these constraints, drag five more labels to the stack view. You'll see that the layout changes without you having to add any constraints. Neat, isn't it! Let's explore some of the available settings for the stack view. Select the stack view and look at the Attributes Inspector.

You'll notice that you can change the stack axis. Currently, it's set to vertical so the views are placed one above the other. Setting them horizontal will position them next to each other. The alignment determines how the views inside of the stack view are aligned. This doesn't change the text alignment at all. It only changes the alignment of the views. Change this value to see what happens (the value you should end up using for this layout is Fill).

Changing the Distribution doesn't do anything for this stack view. That's because the height is dynamically set based on the contents. If you'd have a stack view with a fixed height, this would determine how the labels are distributed over the entire available height. The Spacing setting determines how much room there should be between the views inside of the stack view. Set this value to 4 so we have some room for the labels to breathe.

To show you how powerful UIStackView really is, we'll refactor the two container views that contain the notes and the contact details.

Before we add a new stack view for the columns, remove the following constraints in the compact width display mode:

In the regular width display mode, delete the following constraints:

With all of these constraints removed, it's time to rebuild. Let's stick with the regular-width device. Select the Stack View, the view that contains the notes label, and the text view. Refer to the following image to make sure that you have the correct views selected:

In the top bar, navigate to Editor | Embed in... | Stack View. This will wrap the selected view in a UIStackView. Now add some constraints to this stack view. We want the container stack view to be positioned 8 points from the superview's leading edge, 8 points from the trailing edge, and 8 points from the bottom. The spacing between the contact name and the stack view should also be 8 points.

Now, select the container stack view and go to the Attributes Inspector. Because the stack view now has a predetermined width and we're stacking on the horizontal axis, we can change the distribution. If you set this to Fill Equally and set a spacing of 8 points, the result will look identical to the previous version that did not use UIStackView; except that this layout involves lesser constraints, which means less maintenance for you.

Finally, click on the + symbol next to the Axis property. This enables you to add Size Class variations for this property. Select a Compact Width, Any Height, Any Gamut variation and set the Axis to Vertical. If you switch to a compact width device now, the layout will update back to the single column variation we had before. No extra constraints are needed. This is just one example of the power of UIStackView; there are many more ways in which UIStackView can make your layout work a lot simpler so make sure you use this component whenever appropriate.

Now let's finish the contact page by displaying some real data.